<template>
	<div class="container">
		<view class="fliter">
			<view class="input-box single-input flex-space-between">
				<view class="item flex-center">
					<u-search :clearabled="true" bg-color="transparent" :show-action="false" v-model="query.serialno" placeholder="请输入机具号" @search="search"></u-search>
					<text class="iconfont icon-saoma" @click.stop="scanCode"></text>
				</view>
			</view>
		</view>
		<view class="termial-box">
			<view class="total flex-space-between">
				<view class="num">
					共计
					<text class="blue">{{ totalNum }}</text>
					台
				</view>
				<view class="filter flex" @click="filterShow = true">
					<view class="btn2">
						筛选
						<text class="iconfont icon-down"></text>
					</view>
				</view>
			</view>

			<!-- <template v-if="list.length"> -->
			<view class="t-item flex" v-model="item.checked" v-for="(item, index) in list" :key="index" @click.stop="toDetail(item)">
				<view class="t-info">
					<u-cell-item :arrow="false" hover-class="none" :border-bottom="false" title="机具SN号：" :value="item.serialno" class="title" />
					<u-cell-item :arrow="false" hover-class="none" :border-bottom="false" title="绑定状态：" :value="item.bindStatus == 0 ? '待绑定' : '已绑定'" />
					<!-- <u-cell-item
            :arrow="false"
            hover-class="none"
            :border-bottom="false"
            title="机具品牌："
            :value="item.brandName"
          /> -->
					<u-cell-item :arrow="false" hover-class="none" :border-bottom="false" title="产品政策：" :value="item.policyName" />
					<u-cell-item :arrow="false" hover-class="none" :border-bottom="false" title="代理商名称：" :value="item.agentName" />
		<!-- 			<u-cell-item :arrow="false" hover-class="none" :border-bottom="false" title="服务费：" :value="item.serviceFee" /> -->
				</view>
			</view>
			<uni-load-more :status="loadMore"></uni-load-more>
			<!-- </template> -->
		</view>
		<u-popup v-model="filterShow" mode="top" :border-radius="20">
			<div class="filter-body">
				<div class="filter-content">
					<u-field :disabled="true" label="产品政策：" :value="query.policyName" :label-width="180" input-align="left" placeholder="请选择" >
						<text class="iconfont icon-Downarrow-R iconfont-right" slot="right" @click="showPicker = true"></text>
					</u-field>
					<u-field label="代理商编号：" v-model="query.agentName" :label-width="180" input-align="left" placeholder="请输入" >
					</u-field>
					<!-- <u-field
            :disabled="true"
            label="品牌："
            :value="query.brandName"
            input-align="left"
            :label-width="150"
            placeholder="请选择"
            @click="showPicker = true"
          >
            <text class="iconfont icon-Downarrow-R iconfont-right" slot="right"></text>
          </u-field> -->
				</div>
				<div class="footer-btn">
					<div class="btn-left"><button class="reset" size="large" type="warn" @click="resetHandle">重置</button></div>
					<div class="btn-right"><button class="myBtn" round size="large" @click="queryHandle">搜索</button></div>
				</div>
			</div>
		</u-popup>

		<u-picker
			title="政策"
			v-model="showPicker"
			mode="selector"
			:range="policyList"
			range-key="policyName"
			confirm-color="#4888FB"
			@confirm="onConfirm"
			@cancel="showPicker = false"
		/>
	</div>
</template>

<script>
import loadMoreData from '@/mixins/loadmore';

import { preMerchBindTerm } from '_a/tripartiteData';

export default {
	mixins: [loadMoreData],
	data() {
		return {
			query: {
				policyCode: this.$store.getters.policyList[0].policyCode
			},
			list: [],
			selectCheckbox: [],
			type: 2,
			pList: [
				{
					text: '回拨给平台',
					value: 0
				},
				{
					text: '回拨给上级',
					value: 1
				}
			],
			showAction: false,
			showPicker: false,
			navIndex: 0,
			navList: [{ title: '全部', value: '' }, { title: '已绑定', value: '1' }, { title: '未绑定', value: '2' }],
			filterShow: false,
			typename: '全部',
			totalNum: 0,
			pageSize: 5,
		};
	},
	computed: {
		policyList() {
			return this.$store.getters.policyList || [];
		}
	},
	onLoad(o) {
		this.navIndex = o.type || 0;
		this.routeType = o.routeType || 'default'; //pre 平行代理进来的  default 普通进来的
		this.query.policyCode = o.policyCode;
		let item = this.policyList.find(item => item.policyCode == o.policyCode);
		if (item) {
			this.query.policyName = item.policyName;
		}
		this.getList();
	},
	onNavigationBarButtonTap() {
		this.$nav.push({ path: '/pages/home/trading/operation' });
	},
	methods: {
		toDetail(item) {
			this.$storage.setStore('termDetailInfo', item);
			this.$nav.push({
				path: '/pages/home/terminal/terminalInfo'
			});
		},
		getList() {
			let params = {
				pageNum: this.pageNum,
				pageSize: this.pageSize,
				...this.query
			};
			switch (this.routeType) {
				case 'pre': //平行代理进入
					preTermList(params).then(res => {
						var list = res.rows;
						this.totalNum = res.total;
						this.loadMoreStatusDeal(list);
						if (list.length > 0) {
							this.list = this.list.concat(list);
						}
					});
					break;
				case 'default':
					preMerchBindTerm(params).then(res => {
						var list = res.rows;
						this.totalNum = res.total;
						this.loadMoreStatusDeal(list);
						if (list.length > 0) {
							this.list = this.list.concat(list);
						}
					});
					break;
				default:
					break;
			}
		},
		unBind() {
			this.$tip.modal({ content: '您确定要解绑吗?' }).then(res => {
				console.log(res);
				termUnBind().then(res => {});
			});
		},
		init() {
			this.$nextTick(() => {
				this.list = [];
				this.refreshLoad();
			});
		},
		resetHandle() {
			this.typename = '全部';
			this.query = {
				pageNum: 1,
				pageSize: 20
			};
		},
		queryHandle() {
			this.$forceUpdate();
			this.init();
			this.filterShow = false;
		},
		scanCode(type) {
			let _this = this;
			// this.$tip.loading('识别中....')
			// #ifdef H5
			this.$tip.toast('暂不支持!');
			// #endif
			// #ifndef H5
			uni.scanCode({
				success(res) {
					_this.$tip.loaded();
					_this.$tip.toast('识别成功!');
					_this.query.serialno = res.result;
					this.init();
				},
				fail() {
					_this.$tip.loaded();
				}
			});
			// #endif
		},
		clickItem(e) {
			console.log(e);
			this.query.pType = this.pList[e].value;
			this.query.pTypeName = this.pList[e].text;
		},
		onConfirm(e) {
			console.log(e);
			this.query.policyCode = this.policyList[e[0]].policyCode;
			this.query.policyName = this.policyList[e[0]].policyName;
			// this.chooseIndex = e[0];
		},
		chagneActive(item) {
			// item.isActive = !item.isActive
			this.$forceUpdate();
		},
		reachBottomCallBack() {
			this.getList();
		},
		search() {
			this.init();
		},
		issuedHandle() {
			/** 下发机具 **/
			if (this.selectCheckbox.length > 0) {
				if (this.type == 1) {
					if (this.orderId) {
						// this.issuedOrder();
						this.submitPopup = true;
					} else {
						this.checkOrder();
						// this.$dialog
						//   .confirm({
						//     message:
						//       "机具通过机具管理下发给下级， 不能自动升级代理商身份，必须要通过采购下单，才能自动升级,是否继续下发?",
						//     confirmButtonColor: "#1989fa",
						//   })
						//   .then(() => {
						//     this.checkOrder();
						//   })
						//   .catch(() => {
						//     // on cancel
						//   });
					}
				} else {
					this.$dialog
						.confirm({
							message: '您确定要回拨SN号吗'
						})
						.then(() => {
							termReturn(this.selectCheckbox.map(item => item.id)).then(res => {
								if (res.code === 200) {
									this.$toast({ message: '回拨成功' });
									this.list = [];
									this.selectCheckbox = [];
									this.query.pageNum = 1;
									this.query.pageSize = 999999;
									this.queryMethod();
								}
							});
						})
						.catch(() => {
							// on cancel
						});
				}
			} else {
				this.$toast({
					message: this.type == 1 ? '请选择下发机具' : '请选择回拨SN号'
				});
			}
		}
	}
};
</script>
<style scoped lang="scss">
.container {
	padding: R(30) 0 R(140);
}
.fliter {
	margin: 0 R(25);
	.single-input {
		flex-wrap: wrap;
		align-items: center;
		.item {
			background: #fff;
			width: 100%;
			padding-right: R(30);
			padding-left: R(10);
			height: R(80);
			background: #ffffff;
			border-radius: R(10);
			margin-bottom: R(30);
			.icon-saoma {
				color: $themeColor;
			}
		}
	}
}
.nav-box {
	margin: 0 R(23) R(30);
	text {
		width: R(124);
		height: R(60);
		line-height: R(60);
		background: #ffffff;
		border-radius: R(30);
		display: inline-block;
		color: #1a1a1a;
		text-align: center;
		font-size: R(28px);
		margin-right: R(20);
	}
	.active {
		border: 1px solid #4286f5;
		color: #4286f5;
		background: #d9e7ff;
		// border-bottom-right-radius: R(20);
	}
}
.termial-box {
	margin: 0 R(25);
	background: #fff;
	border-radius: R(10);
	padding: R(26) R(30);
	.total {
		margin-bottom: R(20);
		font-size: R(24);

		.num {
			font-weight: 400;
			color: #737373;
			.blue {
				color: #4286f5;
			}
		}
		.filter {
			color: #8c8c8c;
			.btn1 {
				margin-right: R(20);
			}
			.icon-down {
				font-size: R(20);
			}
		}
	}
	/deep/.u-checkbox-group {
		width: 100%;
	}
	.t-item {
		padding: R(14) 0 R(24);
		width: 100%;
		border-bottom: 1px solid #eee;

		position: relative;
		.title {
			font-size: R(30);
			font-weight: bold;
			color: #1a1a1a;
			/deep/.u-cell__value {
				color: #1a1a1a;
			}
		}
		/deep/.u-cell {
			padding: R(4) R(10);
			.u-cell__value {
				text-align: left;
			}
		}
		.btn-box {
			width: R(137);
			height: R(60);
			line-height: R(60);
			background: #d9e7ff;
			border-radius: R(30);
			color: #4286f5;
			text-align: center;
			font-size: R(28px);
			margin-right: R(20);
			position: absolute;
			right: R(10px);
			top: 43%;
		}
	}
}

.filter-body {
	padding: R(30);
}
.filter-content {
	margin-bottom: R(30);
}

.filter-body .footer-btn {
	display: flex;
	/*position: absolute;*/
	bottom: 0;
	width: 100%;
}

.filter-body .footer-btn .btn-left {
	width: 30%;
	margin-left: 15%;
}

.filter-body .footer-btn .btn-right {
	width: 30%;
	margin-left: 10%;
}

.filter-body .filter-tiem {
	margin-bottom: R(25);
}

.filter-body .filter-tiem .tit {
	font-size: R(32);
	color: #333;
}

.filter-body .filter-tiem .select-list .select-item {
	float: left;
	width: 33%;
	padding: R(20) R(10);
}
</style>
